<script setup>
    import { getDisabledDetails, getDbDetails, getVeteranDetails, getFbDetails } from '@/api/govern'

    let dialogVisible = $ref(false)

    let details = $ref({})

    const showDetails = (data) => {
        details = data
        dialogVisible = true
        clickTabbr(0, details.isCjh!=0)
    }

    let current = $ref(0)
    let specialTabbar =  [
        { name: '残疾人', v: 'isCjh' },
        { name: '低保户', v: 'isDb' },
        { name: '退役军人', v: 'isVeteran' },
        { name: '五保户', v: 'isFb' }
    ]

    let formItem = [
        [
            { l: '姓名', v: 'name' },
            { l: '性别', v: 'sex_dictText' },
            { l: '身份证号码', v: 'naidCardme' },
            { l: '所属村', v: 'orgCode_dictText' },
            { l: '街道区划', v: 's1' },
            { l: '社区区划', v: 's2' },
            { l: '残疾类别', v: 's3_dictText' },
            { l: '残疾等级', v: 's4_dictText' },
            { l: '残疾详情', v: 's5' },
            { l: '有效期开始时间', v: 's6' },
            { l: '持证状态', v: 's7' },
            { l: '是否目测评定', v: 's8' },
            { l: '最后操作类型', v: 's9' },
            { l: '最后操作时间', v: 's10' },
            { l: '初次发证时间', v: 's11' },   
        ],
        [
            { l: '姓名', v: 'name' },
            { l: '身份证号码', v: 'idCard' },
            { l: '所属村', v: 'orgCode_dictText' },
            { l: '乡镇', v: 's2' },
            { l: '组', v: 's3' },
            { l: '一本通账号', v: 's10' },
            { l: '是否贫困户', v: 's11_dictText' },
            { l: '享受人数', v: 's12' },
            { l: '级别', v: 's13_dictText' },
            { l: '备注', v: 'remark' }
        ],
        [
            { l: '姓名', v: 'name' },   
            { l: '身份证号码', v: 'idCard' },   
            { l: '所属村', v: 'orgCode_dictText' },   
            { l: '联系方式', v: 'phone' },   
            { l: '行政区划', v: 's1' },   
            { l: '人员类别', v: 's2_dictText' },   
            { l: '备注', v: 'remark' },   
        ],
        [
            { l: '姓名', v: 'name' }, 
            { l: '身份证号码', v: 'idCard' }, 
            { l: '所属村', v: 'orgCode_dictText' }, 
            { l: '镇', v: 'town' }, 
            { l: '组', v: 's3' }, 
            { l: '一本通账号', v: 's10' }, 
            { l: '是否贫困户', v: 's11_dictText' }, 
            { l: '备注', v: 'remark' }, 
        ]
    ]

    let resData = $ref({})
    let dataLoading = $ref(false)
    const clickTabbr = (index, hasData) => {
        current = index
        resData = []
        let api = [getDisabledDetails, getDbDetails, getVeteranDetails, getFbDetails]
        if(hasData){
            dataLoading = true
            api[current]({ id: details.id }).then(res => {
                dataLoading = false
                resData = res.result?.records[0]
            })
        }
    }

    defineExpose({
        showDetails
    })

</script>

<template>
    <el-dialog
        v-model="dialogVisible"
        width="1050px"
        custom-class="xz-dialog member-info-dialog"
    >
        <div class="dialog-title">人物画像</div>

        <div class="member-info-deatails flex-center">
            <img src="../../../assets/images/member-01.png" alt="">
            <ul class="list-wrap">
                <li>姓名: {{ details.name }}</li>
                <li>联系电话: {{ details.phone }}</li>
                <li>管理编号: {{ details.manageNumber }}</li>
                <li>所属村: {{ details.org_dict  }}</li>
                <li>与户主关系: {{ details.ownerConcern_dictText  }}</li>
                <li>身份证号: {{ details.idCard }}</li>
            </ul>
            
        </div>

        <div class="tabbar-wrap">
            <div 
                class="item"
                v-for="(item, index) in specialTabbar"
                :key="index"
                :class="{ active: index==current }"
                @click="clickTabbr(index, details[item.v]!=0)"
            >
                {{ item.name }}
                <div class="dot" v-if="details[item.v]!=0"></div>
            </div>
        </div>
        <el-scrollbar style="height: 300px" class="form-wrap">
            <el-form :inline="true" :label-width="110">
                <el-form-item 
                    v-for="(item, index) in formItem[current]"
                    :key="index"
                    :label="item.l"
                >
                    <el-input :value="resData[item.v]" readonly></el-input>
                </el-form-item>
            </el-form>
        </el-scrollbar>

    </el-dialog>
</template>

<style lang="less">
    .member-info-dialog.el-dialog{
        background: url('../../../assets/images/member-03.png') center no-repeat;   
        background-size: 130% 130%;
        // height: 1350px;
        padding: 0 40px;
        // max-height: none;

        .member-info-deatails{
            margin-top: 30px;
            width: 930px;
            height: 217px;
            padding: 0 13px;
            background: url('../../../assets/images/member-02.png') center no-repeat;

            img{
                margin-top: -22px;
            }

            .list-wrap{
                flex: 1;
                margin-left: 8px;
                margin-top: 37px;

                li{
                    width: 50%;
                    display: inline-block;
                    color: #fff;
                    font-size: 18px;
                    padding-bottom: 25px;
                }
            }
        }

        .tabbar-wrap{
            margin-top: 40px;
            border: 1px solid #179FFF;
            display: inline-block;

            .item{
                display: inline-block;
                width: 97px;
                height: 33px;
                line-height: 33px;
                text-align: center;
                border-right: 1px solid #179FFF;
                color: #fff;
                font-size: 16px;
                cursor: pointer;
                position: relative;

                &:last-child{
                    border: none;
                }

                &.active,&:hover{
                    background: #179FFF;
                }

                .dot{
                    position: absolute;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: rgb(251, 98, 98);
                    top: -5px;
                    right: -2px;
                }
            }
        }

        .form-wrap{
            margin: 0 -38px;
            padding: 30px 0;
        }
    }
</style>